<template>
  <div id="scrollnavbar">
    <!-- 顶部横向滚动组件 -->
    <ScrollNavBar :current="current" :labels="labels" @change="changeHandler" />
    <div class="side-container">
      <div class="cardMid">
        <!-- 中部切换卡片tab容器 -->
        <Tabs :value="current">
          <TabPane v-for="(label,indexs) in labels" :key="indexs" :name="label" :label="label">
            <!-- tab内部卡片组件 -->
            <courseCircleCard v-for="(item,index) in itemList" :key="index" :item="item" />
          </TabPane>
        </Tabs>
      </div>
    </div>
    <div style="height:30px;"></div>
  </div>
</template>

<script>
//导入vue
import Vue from "vue";
//cube-ui横向顶部滑动组件
import { ScrollNavBar } from "cube-ui";
//导入cube-ui样式文件
import "cube-ui/lib/cube.min.css";
//导入卡片组件
import courseCircleCard from "../../Cards/circleCard/courseCircleCard";
//导入iview-ui  Tab切换组件
import { Tabs, TabPane } from "view-design";

export default {
  name: "scrollnavbar",
  //组件注册
  components: {
    ScrollNavBar,
    courseCircleCard,
    Tabs,
    TabPane
  },
  //传入属性  
  props: [
    "currentEle", //currentEle当前初始元素
     "labels",    //顶部滑动labels数组
     "itemList"   //卡片元素数组
     ],
  data() {
    return {
      current: "",  //ScrollNavBar当前切换变量
    };
  },
  computed: {},
  watch: {},
  methods: {
    changeHandler(cur) {    //ScrollNavBar切换函数事件
      this.current = cur;
    }
  },
  created() {   
    //初始选中变量赋值
    this.current = this.currentEle;
  },
  mounted() {
    //首次挂载修改组件UI默认样式
    let scrollbar = document.getElementsByClassName("cube-scroll-nav-bar-item");
    for (let i = 0; i < scrollbar.length; i++) {
      scrollbar[i].style = "padding: 13px 15px;";
    }
    //移除tab切换的表头标签头
    let tabel = document.getElementsByClassName("ivu-tabs-bar")[0];
    tabel.remove();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* 增加的原有UI的CSS */
.imgURLclass {
  /*  */
  width: 100%;
  height: 100%;
  border-radius: 0px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.cardMid {
  width: 90%;
  margin: 20px auto;
}
</style>